<template>
  <div class="search-bar">
      <el-radio-group v-model="type" @change="changeType">
        <el-radio-button v-for="(item,index) in initData.types" :key="index" :label="item.id">{{item.name}}</el-radio-button>
      </el-radio-group>
      <template v-show="type == 'airMonitor'">

      </template>
      <template v-show="type == 'liveWeather'" >

      </template>
      <template v-show="type == 'pollutantSource'">

      </template>
  </div>

</template>
<script>
import {city,cityId,cityPinyin,geoserver} from '@/config/env';
import mixins from './mixins';
export default {
  mixins: [mixins],
  props:{
    map: Object,
    meteoblueMaps: Object
  },
  data(){
    return{
      type: 'airMonitor',
      initData:{
        types:[
          {id: 'airMonitor', name: '空气质量', layers: ['air-monitor']},
          {id: 'liveWeather', name: '实况气象', layers: ['live-weather-layer','live-weather-label','live-weather-source']},
          {id: 'pollutantSource', name: '污染排放', layer: ['station-layer', 'circle', 'station_emis_circle', 'stations_inventory_' + cityPinyin, 'stations_inventory_circle_'+cityPinyin]},
        ]
      },
      layers:[
        'air-monitor',
        'live-weather-layer', 
        'live-weather-label', 
        'live-weather-source',
        'station-layer',
        'circle',
        'station_emis_circle',
        'stations_inventory_' + cityPinyin,
        'stations_inventory_circle_'+cityPinyin
      ]
    }
  },
  methods:{
    async changeType(val){
      if(this.type == 'airMonitor'){
        await this.getListAir();
        this.addLayerAir();
      }else if(this.type == 'liveWeather'){
        await this.getListLive();
        this.addLayerLive()
      }
    },
  }
}
</script>